﻿@model ContactUsModel
@using Nop.Web.Models.Common;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.InfoPage = true;
    ViewBag.Title = "Contact Us";
}

<section class="contact-us">
    <h1 class="page-title"><span class="title-image"></span>Contact Us</h1>
    <div class="map-wrapper">
        <div id="map"></div>
        <div class="spotshub-mobile-locations"><img src="~/Content/Images/spotshub-locations.png" alt="SpotsHUB offices are currently located in Vancouver and Calgary." /></div>
        <div class="address">
            <h4>SpotsHUB Vancouver Office</h4>

            <p>
                <i class="fa fa-map-marker"></i> Unit 20 - 91 Golden Drive, Coquitlam<br />
                British Columbia V3K 6R2, Canada <br />

                <i class="fa fa-phone"></i> +1 (604) 290 9888<br />
            </p>

            @*<h4>SpotsHUB Calgary Office</h4>

            <p>
                <i class="fa fa-map-marker"></i> Unit 9 4709 14th Street NE, Calgary, <br />
                Alberta T2E 6S4, Canada<br />

                <i class="fa fa-phone"></i> +1 (403) 277 9913<br />
            </p>*@
        </div>
    </div>
    <div>
        @using (Html.BeginForm())
        {
            <fieldset>
                <p class="message-error">
                    @Html.ValidationSummary(true)
                </p>
                <div class="form-container">
                    <div class="row">
                        <div class="contact-us-info-container col-md-6">
                            <div class="contact-form-icon"></div>
                            <div class="contact-form-wrapper" id="contact-container-id">
                                <div class="name-input">
                                    <div class="input-group">
                                        @Html.TextBox("Phone", null, new { @class = "contact-phone-test", autofill = "off" })
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="contact-us-icon2"></span></span>
                                        @Html.TextBoxFor(model => model.FullName, new { @class = "fullname form-control", placeholder = T("ContactUs.FullName.Hint") })
                                    </div>
                                </div>

                                <div class="email-input">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="contact-us-icon3"></span></span>
                                        @Html.TextBoxFor(model => model.Email, new { @class = "email form-control", placeholder = T("ContactUs.Email.Hint") })
                                    </div>
                                </div>
                                @if (Model.DisplayCaptcha)
                                {
                                <div class="captcha-box">
                                    @Html.Raw(Html.GenerateCaptcha())
                                </div>
                                }
                                <div class="enquiry-input">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="contact-us-icon1"></span></span>
                                        @Html.TextAreaFor(model => model.Enquiry, new { @class = "enquiry form-control", placeholder = T("ContactUs.Enquiry.Hint"), rows = "3" })
                                    </div>
                                </div>

                                <div class="buttons">
                                    <input type="submit" name="send-email" class="btn btn-block btn-primary" value="@T("ContactUs.Button")" />
                                </div>

                            </div>

                            @if (Model.SuccessfullySent)
                            {
                                <text>
                                    <br />
                            <div class="alert alert-success contact-form-wrapper" role="alert">@Model.Result</div>
                                </text>
                            }
                        </div>

                        <div class="form-input-half col-md-1"></div>
                        <div class="contact-us-info-container col-md-5">
                            <div class="contact-hours">
                                <div class="contact-hours-icon"></div>
                                <div class="contact-hours-container">
                                    <div class="col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>Open Monday to Friday</p>
                                        <p>Closed on Saturday, Sunday and Statutory Holiday</p>
                                        @*<button type="button" class="btn btn-block">List of Statutory Holidays</button>*@
                                    </div>

                                    <div class="contact-office-hours-container col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>Customer Service Hours:</p>
                                        <p>9 AM to 5 PM (local time)</p>
                                        @*<p>
                                                <br />
                                                <strong>Office Hours:</strong><br />
                                                9AM to 5PM (local time)
                                            </p>*@

                                    </div>
                                    <div class="contact-delivery-hours-container col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>Courier Service Delivery Operation Hours:</p>
                                        <p>8 AM to 4 PM (local time)</p>
                                        @*<p>
                                                <br />
                                                <strong>Delivery Hours:</strong><br />
                                                8AM to 4PM (local time)
                                            </p>*@
                                    </div>
                                    <div class="contact-delivery-hours-container col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>Shopping Service Delivery Operation Hours:</p>
                                        <p>8 AM to 9 PM (local time)</p>
                                    </div>
                                    <div class="contact-email-address-container col-xxs-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>Email:</p>
                                        <p><a href="mailto:info@spotshub.com">info@spotshub.com</a></p>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="contact-phone">
                                <div class="contact-phone-icon"></div>
                                <div class="contact-phone-wrapper">
                                    <div class="col-xs-12">
                                        <p>
                                            Vancouver<br />
                                            + 1 (604) 290-9888
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
            </fieldset>
        }
    </div>
</section>
<div class="clear"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
    $("#map").css.width = $(window).width();
    var viewportWidth = $(window).width();
    //google map
    //var centerMap = new google.maps.LatLng(54.305424, -33.713994);//centering on North Atlantic Ocean (original)
    var centerMap = new google.maps.LatLng(49.305424, -112.713994);//centering on North Atlantic Ocean
    var iphoneCenterMap = new google.maps.LatLng(56.367922, -115.307806);//centering on canada/Alberta (original)
    //var ipadCenterMap = new google.maps.LatLng(47.290182, -67.397803);//centering on New Brunswick (original)
    var ipadCenterMap = new google.maps.LatLng(56.290182, -92.397803);//centering on New Brunswick
    if ((navigator.userAgent.match(/iPhone/i) === "iPhone") || viewportWidth <= 480) {
        centerMap = iphoneCenterMap;
    }
    if ((navigator.userAgent.match(/iPad/i) === "iPad") || (481 <= viewportWidth && viewportWidth <= 1024)) {
        centerMap = ipadCenterMap;
    }
    var vancouver = new google.maps.LatLng(49.2323994, -122.8240355);
    var calgary = new google.maps.LatLng(51.0948471, -114.028375);
    var offices = [vancouver];

    var markers = [];
    var iterator = 0;

    var map;

    function initialize() {
        var mapOptions = {
            zoom: 5,
            scrollwheel: false,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
            { featureType: "water", stylers: [{ visibility: "on" }, { color: "#ffffff" }] },
            { featureType: "landscape", elementType: "geometry.fill", stylers: [{ color: "#123564" }] },
            { featureType: "road", stylers: [{ visibility: "off" }] },
            { featureType: "poi", stylers: [{ visibility: "off" }] },
            { featureType: "administrative.country", stylers: [{ color: "#913D88" }, { weight: 1 }] },
            { featureType: "administrative.country", elementType: "labels", stylers: [{ visibility: "off" }] },
            { featureType: "administrative.province", elementType: "geometry", stylers: [{ color: "ffffff" }] },
            { featureType: "landscape.locality", elementType: "geometry.stroke", stylers: [{ color: "#ffffff" }, { weight: 1 }] },
            { featureType: "international-borders", elementType: "labels", stylers: [{ color: "#ffffff" }, { visibility: "on" }] },
            { featureType: "international-borders", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }] },
            { featureType: "administrative.locality", elementType: "labels", stylers: [{ visibility: "off" }] },
            { featureType: "administrative.province", elementType: "labels", stylers: [{ color: "#ffffff" }] },
            { featureType: "administrative.province", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }] }
            ]
        };


        map = new google.maps.Map(document.getElementById('map'),
                mapOptions);

        setTimeout(function () {
            drop();
        }, 1500);
    }
    google.maps.event.addDomListener(window, 'load', initialize);


    function drop() {
        for (var i = 0; i < offices.length; i++) {
            setTimeout(function () {
                addMarker();
            }, i * 200);
        }
    }

    function addMarker() {
        markers.push(new google.maps.Marker({
            position: offices[iterator],
            map: map,
            //icon: '/Content/images/spotshub-textlogo.png',
            draggable: false,
            animation: google.maps.Animation.DROP
        }));
        iterator++;
    }

    $(function () {
        var flag = ('@Model.SuccessfullySent' == 'True');
        flag ? $('#contact-container-id').hide() : $('#contact-container-id').show();

    });

</script>